<template>
  <view class="searchPage">
    <!-- 顶部搜索框 -->
    <view class="box">
      <uni-search-bar v-model.trim="str" class="bar" radius="40" cancelButton="none" @confirm="myconfirm"
        @input="myinput"></uni-search-bar>
    </view>
    <view class="thinkList" v-if="str">
      <view class="item" v-for="(item, index) in list" :key="index" @click="goDetail(item.goods_id)">
        <text>{{item.goods_name}}</text>
        <uni-icons type="right" size="16"></uni-icons>
      </view>
    </view>
    <!-- 搜索历史 -->
    <view class="history" v-else>
      <view class="title">
        <text>搜索历史</text>
        <uni-icons type="trash" @click="clear"></uni-icons>
      </view>
      <view class="itembox">
        <view class="item" v-for="(item, index) in historyList" :key="index" @click="goList(item)">
          {{item}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  // 输入获取数据  1：定义一个方法调用接口 2：存储数据并渲染
  // 数据持久化：存：值修改了就存   取：初始值就取
  /*
  原生：
     localStorage.setItem  getItem   removeItem
  微信
     wx.setStorageSync
     wx.getStorageSync
     wx.removeStorageSync
  */
  export default {
    data() {
      return {
        list: [],
        timer: null,
        str: '',
        loading: false,
        historyList: uni.getStorageSync('history') || []
      }
    },
    methods: {
      /*
      防抖：倒计时执行某事件，倒计时过程中如果请求再次执行该事件，清除上一次倒计时，再次重新倒计时
      节流：倒计时执行某事件，倒计时过程中如果请求再次执行该事件，直接return 不理
      */

      async getData(str) {
        const res = await uni.$http.get('/goods/search', {
          params: {
            query: str,
            pagenum: 1,
            pagesize: 15
          }
        })
        this.list = res.message.goods
      },



      // 防抖
      myinput(e) {
        if (this.str.trim() === '') {
          return
        }
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
          this.getData(e)
        }, 500)
      },
      // 节流
      // myinput(e) {
      //   if (this.loading) {
      //     return
      //   }
      //   this.loading = true
      //   setTimeout(() => {
      //     this.getData(this.str)
      //     this.loading = false
      //   }, 500)
      // },
      // 确认点击事件
      myconfirm(e) {
        console.log('confirmEvent', e);
        if (e.value.trim() !== '') {
          uni.navigateTo({
            url: "/pages/list/list?key=" + e.value
          })
          this.historyList.unshift(e.value)
          // 去重
          this.historyList = [...new Set(this.historyList)]
          // 存储
          uni.setStorageSync('history', this.historyList)
        }

      },
      // 盀跳转至详情
      goDetail(id) {
        uni.navigateTo({
          url: "/pages/goods_detail/main?goods_id=" + id
        })
        this.str = ''
        this.list = []
      },
      // 跳转至列表
      goList(name) {
        uni.navigateTo({
          url: "/pages/list/list?key=" + name
        })
      },
      // 清空点击
      async clear() {
        const res = await uni.showModal({
          title: "温馨提示",
          content: "您确定清空该内容吗？"
        })
        if (res.confirm) {
          // 确定
          this.historyList = []
          console.log(this.historyList);
          uni.setStorageSync('history', this.historyList)
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .searchPage {
    .box {
      background-color: #c00000;
    }

    .thinkList {
      font-size: 12px;

      .item {
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 1px solid #f3f3f3;

        text {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }
  }

  .history {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100rpx;
      padding: 0 20rpx;
      border-bottom: 1px solid #f3f3f3;
    }

    .itembox {
      display: flex;
      flex-wrap: wrap;

      .item {
        padding: 6rpx 10rpx;
        background-color: #ccc;
        margin: 20rpx;
      }
    }
  }
</style>